<template>
  <div class="comment-area comment-edit" v-show="editable">
    <div class="comment-edit-left">
      <h1>添加新评论</h1>
      <el-input
        v-model="textarea"
        :autosize="{ minRows: 4, maxRows: 4 }"
        type="textarea"
        :placeholder="name + (name ? '？':'') + '写点什么吧...'"
      />
    </div>
    <div class="comment-edit-right">
      <el-button size="large" type="success" plain @click="reply">回复</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useStore } from '../stores';

// 是否显示该组件
defineProps({
  editable: {
    type: Boolean,
    default: false
  }
})
// 用户name
const name = useStore().name

// 评论内容
const textarea = ref('')

// 将评论内容发送出去
const emits = defineEmits(['replyEmits'])
const reply = () => {
  emits('replyEmits', textarea.value)
  textarea.value = '';  // 发送后将编辑框清空
}
</script>

<style scoped>
.comment-edit {
  background: linear-gradient(87deg, #fb6340 0, #fbb140 100%) !important;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  padding: 3rem;
  padding-top: 1rem;
}
.comment-edit-left {
  width: 580px;
}
.comment-edit-left > h1{
  color: #fff;
  font-size: 25px;
}
.comment-edit-right {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}
</style>